<template>
  <div class="c-bg-sgray">
    <div class="c-p c-fc-white">
      <img class="c-w100 imgCloseBig" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/mall/offlineSuccessBg.png">
      <div class="c-pa c-p-l0 c-p-r0 c-p-t60 c-mlr-auto c-textAlign-c c-fs36 c-lh50">提货成功</div>
      <div class="c-pa c-p-l0 c-p-r0 c-p-t120 c-mlr-auto c-textAlign-c c-fs24 c-lh34">请确保已经拿到商品!</div>
      <div class="c-hh100 c-ww100 c-brp50 c-pa c-p-l0 c-p-r0 c-m-0auto c-p-t180 theme-bd2 c-bg-white">
        <span class="iconfont c-fs64 theme-fc c-pa c-p-b0 c-p-r0 c-p-t0 c-p-l0 c-mauto c-flex-row c-aligni-center c-justify-center">&#xe82c;</span>
      </div>
    </div>
    <div class="c-mt40 c-ph24">
      <div class="c-bg-white c-br8 c-box-shadow c-ph20">
        <div class="c-fc-xblack c-textAlign-c c-fs26 c-lh36 c-pv20">您本次自提的商品</div>
        <div v-for="(item, index) in dataList" :key="index" class="c-pv20 c-pr16 c-p c-bd-t1">
          <div class="c-flex-column c-alignc-center c-justify-sb">
            <div class="c-flex-row">
              <div class="c-ww150 c-hh150 c-text-hidden c-br10">
                <img :src="$addXossFilter(item.avatar)" class="c-w100 c-br10 imgCloseBig" />
              </div>
              <div class="c-flex-column c-flex-grow1 c-w0 c-pl20">
                <div class="c-fs24"><span v-if="item.type == 2" class="c-fs20 theme-bg c-fc-white c-mr4 c-textAlign-c c-br4 c-pv4 c-ph8 c-br20">限时{{Number(item.price) == 0 ? '免费' : '折扣'}}</span>{{item.goodsName}}</div>
                <div class="c-fs20 c-fc-gray c-mt20" v-if="item.subSpecs">规格：{{item.subSpecs}}</div>
              </div>
              <div class="c-flex-column c-aligni-end">
                <span class="c-fs24 c-fc-xblack">{{'￥' | iosPriceFilter}}{{item.price}}</span>
                <span class="c-fs20 c-fc-gray c-mt5">x {{item.quantity}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PickUpSuccess',
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      dataList: []
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.path != '/mall/offlineSite/pickUpSuccess') {
      localStorage.removeItem('offlineGoods');
    }
    next();
  },
  methods: {
  },
  activated() {
    setDocumentTitle("提货成功");
    let list = JSON.parse(localStorage.getItem('offlineGoods'));
    list.forEach((item) => {
      if (item.data && item.data.length > 0) {
        let data = item.data;
        for (let key of data) {
          this.dataList.push(key);
        }
      } else {
        this.dataList.push(item);
      }
    })
  },
  deactivated() {
  }
}
</script>
<style>
.c-p-t60 {
  top: 1.5rem;
}
.c-p-t120 {
  top: 3rem;
}
.c-p-t180 {
  top: 4.5rem;
}
.c-mauto{
  margin: auto;
}
</style>